<template>
  <div class="basic-wrap">
    <div class="button-wrap">
<!--      <a-space>-->
<!--        <a-button type="primary" @click="handleAdd">新增</a-button>-->
<!--      </a-space>-->

      <div class="right-button-wrap">
        客户名称
        <a-select
          ref="select"
          v-model:value="so.clientId"
          style="width: 120px;margin-left:8px;margin-right: 8px;"
          allowClear
        >
          <a-select-option
            v-for="item in clientList"
            :key="item.id"
            :value="item.id"
          >{{ item.clientName }}
          </a-select-option
          >
        </a-select>
        <a-input v-model:value="so.keyword" placeholder="关键词查询" style="width:160px;margin-right:8px">
          <template #prefix>
            <SearchOutlined style="color:#666"/>
          </template>
        </a-input>
        <a-button type="primary"  @click="reload">查询</a-button>
      </div>
    </div>
    <div class="table-wrap">
      <a-table :loading="loading" size="middle" :dataSource="dataSource" :columns="columns"
               :pagination="pagination" @change="pageChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-button class="button-interval" type="link" size="small"
                      @click="handleDelete(record)">删除
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, unref, computed, onMounted, reactive, watch, nextTick} from 'vue';
import {message} from 'ant-design-vue';
import {
  outboundPageApi,
  listClientApi, type OutboundPageSo, type ClientVo, type OutboundPageVo
} from '#/api';

import {SearchOutlined} from "@ant-design/icons-vue";


const loading = ref(false);

const dataSource = ref<OutboundPageVo[]>([]);
const clientList = ref<ClientVo[]>([]);

const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 10,
  size: '',
  showSizeChanger: false,
  showQuickJumper: false,
});
const so = reactive<OutboundPageSo>({
  keyword: '',
  startTime: '',
  endTime: '',
  clientId: '',
})

const pageParam = computed<any>(() => ({
  query: so,
  current: pagination.value?.current,
  size: pagination.value?.pageSize,
}));

const columns = [
  {
    title: '资产编码',
    dataIndex: 'assetCode',
    key: 'assetCode',
    width: 200,
    align: 'center',
  },
  {
    title: '资产名称',
    dataIndex: 'assetName',
    key: 'assetName',
    align: 'center',
  },
  {
    title: '绑定EPC',
    dataIndex: 'assetEpc',
    key: 'assetEpc',
    align: 'center',
  },
  {
    title: '所属客户',
    dataIndex: 'clientName',
    key: 'clientName',
    align: 'center',
  },
  {
    title: '所在楼层',
    dataIndex: 'assetFloor',
    key: 'assetFloor',
    align: 'center',
  },
  {
    title: '所在库房',
    dataIndex: 'assetPosition',
    key: 'assetPosition',
    align: 'center',
  },
  {
    title: '位置信息',
    dataIndex: 'address',
    key: 'address',
    align: 'center',
  },
  {
    title: '出库原因',
    dataIndex: 'reason',
    key: 'reason',
    align: 'center',
  },
  {
    title: '出库人',
    dataIndex: 'createBy',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '出库时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    width: 160
  },
];

onMounted(() => {
  init()

});

// watch(dateValue, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
// });
const init = async() => {
  await listClient();
  await list()
}

const reload = () => {
  pagination.value.current = 1
  list()
}

const pageChange = (page) => {
  pagination.value.current = page.current
  list()
}

async function list() {
  loading.value = true;
  const res = await outboundPageApi(unref(pageParam)).finally(()=>{loading.value = false});
  dataSource.value = res.records;
}
const handleDelete = async (record) =>{
  // loading.value = true
  // await delUserApi({id:record.id}).finally(()=>{loading.value = false})
  message.success("删除成功")
  reload()
}

async function listClient() {
  clientList.value = await listClientApi();
  so.clientId = clientList.value[0]?.id
}

</script>
<style lang="less">
.basic-wrap {
  margin: 0 16px;
}

.button-wrap {
  margin: 16px 0;
  display: flex;
  align-items:center;
}
.right-button-wrap{
  margin-left: auto;
}
</style>
